<template>
	<view class="soslist-layout">
		<view class="list" v-if="resData">
			<view class="phoneOne">
				  {{resData.phone1}}
			</view>
			<view class="phoneTwo">
				  {{resData.phone1}}
			</view>
			<navigator url="/pages/function/sos-notify" hover-class="false">
				<view class="modify-button">
					{{$t('sosList.modify')}}
				</view>
			</navigator>

		</view>
		<view class="no-record" v-if="!resData">
			<image class="no-record-img" src="../../static/device/no_track_record.png">

			</image>
			<view class="no-record-text">{{$t('sosList.noneSOS')}}</view>
			<navigator url="/pages/function/sos-notify" hover-class="false">
				<view class="set-sos">{{$t('sosList.goSet')}}</view>
			</navigator>

		</view>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		apiGetDeviceSOSList
	} from "../../api/device_api";
	import {
		ref
	} from "vue";
	import {
		i18nTool
	} from '../../utils/i18en';
import { getImei } from "../../utils/user_tools";
	const resData = ref(null);
	onLoad(() => {
		uni.setNavigationBarTitle({
			title: i18nTool("sosList.navTitle")
		})
	})
	onShow(async () => {
		let imei = getImei();
		let res = await apiGetDeviceSOSList({
			imei: imei
		});
		resData.value = res.content;

	})
</script>

<style lang="scss" scoped>
	.soslist-layout {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: #f1f1f1;

		.list {
			margin: 20rpx 20rpx;
			padding: 40rpx 4prpx;

			.phoneOne {
				color: #333;
				font-size: 30rpx;
				margin-top: 4rpx;
				background-color: #fff;
				padding: 40rpx 30rpx;
				border-radius: 6rpx;
			}

			.phoneTwo {

				padding: 40rpx 30rpx;
				color: #333;
				margin-top: 4rpx;
				font-size: 30rpx;
				background-color: #fff;
				border-radius: 6rpx;
			}

			.modify-button {
				margin-left: 30rpx;
				margin-right: 30rpx;
				margin-top: 100rpx;
				height: 80rpx;
				color: #fff;
				background-color: #53786C;
				border-radius: 40rpx;
				@include flex-box-set(center);

			}

		}

		.no-record {
			background-color: #fff;
			position: fixed;
			bottom: 0;
			top: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			z-index: 100000;

			.no-record-img {
				width: 100rpx;
				height: 100rpx;
			}

			.no-record-text {
				font-size: 26rpx;
				margin-top: 40rpx;
				color: #666;
			}

			.set-sos {
				width: 200rpx;
				margin-top: 40rpx;
				font-size: 26rpx;
				height: 80rpx;
				color: #fff;
				background-color: #53786C;
				border-radius: 40rpx;
				@include flex-box-set(center);
			}



		}
	}
</style>